<template>
  <div class="Preview">
      <div class="Preview-video">
          <video class="video" Controls>
            <source src ='//maoyan.meituan.net/movie/videos/854x480e9df22d1cc6e4e57ab0f42737d4a93e1.mp4' type="video/ogg">
          </video>
          </div>
          <div class="ticket-purchase">
              <div class="link">
                <img src="../../../public/images/mao.png"/>
                <span>打开app,提升3倍流畅度</span>
              </div>
              <div class="preview-intro">
                <img class="img" :src ='lisPrt.albumImg' />
                <div class="movie-intro-desc">
                    <div class="text-ellipsis">{{lisPrt.nm}}</div>
                    <span class="text-ellipsis">{{lisPrt.enm}}</span>
                    <span class="text-ellipsis">{{lisPrt.pubDesc}}</span>
                    <span class="text-ellipsis">{{lisPrt.cat}}</span>
                    <span class="text-ellipsis">{{lisPrt.star}}</span>
                </div>
                <div class="preview-buy-box">
                  <span class="preview-buy-span">特惠购票</span>
                  <div class="preview-buy-div">猫眼评分<span>{{lisPrt.sc}}</span></div>
                </div>
              </div>
              <hr/>
              <div class="preview-comments">
                    <div class="title-box">
                      <span class="title">评论</span>
                      <span class="count">802条</span>
                    </div>
                    <div class="avatar-box">
                        <div class="avatars">
                            <img class="img noneBg avatar img avatar-0" src="https://img.meituan.net/avatar/fbe4990d67501a3222151e26f3ff8b5e16081.jpg@56w" >
                            <img class="img noneBg avatar img avatar-1" src="https://img.meituan.net/maoyanuser/da1d6e35eda3d36bd7c61a60ea7f942a10407.png@56w">
                            <img class="img noneBg avatar img avatar-2" src="https://img.meituan.net/avatar/fbe4990d67501a3222151e26f3ff8b5e16081.jpg@56w" >
                        </div>
                    </div>
              </div>
               <div class="preview-list">
                 <h2 class="list-view-title">更多预告/花絮</h2>
                 <ul class="preview-scroll">
                   <li class="video-item">
                     <div><img class="img noneBg" src="//p0.meituan.net/movie/1c324b9a644dfbdc713834ee4f41b3d624876.jpg@280w_156h_1e_1c.webp" data-reactid=".0.4.8.1.$0.0.0"></div>
                     <p class="red title">终极版预告片 守护少年反对校园欺凌</p>
                   </li>
                     <li class="video-item">
                     <div><img class="img noneBg" src="//p0.meituan.net/movie/a077f0d532256527c013b7fb0ea4b61a19292.jpg@280w_156h_1e_1c.webp" data-reactid=".0.4.8.1.$1.0.0"></div>
                     <p class="red title">{{lisPrt.videoName}}</p>
                   </li>
                     <li class="video-item">
                     <div><img class="img noneBg" src="//p0.meituan.net/movie/242069c14222441d50dabc0d1a2fb7fa23568.jpg@280w_156h_1e_1c.webp" data-reactid=".0.4.8.1.$3.0.0"></div>
                     <p class="red title">终极版预告片 守护少年反对校园欺凌</p>
                   </li>
                     <li class="video-item">
                     <div><img class="img noneBg" src="//p1.meituan.net/movie/1b4bd0c309d5f47b42d4924dfc1615a2575359.jpg@280w_156h_1e_1c.webp" data-reactid=".0.4.8.1.$4.0.0"></div>
                     <p class="red title">终极版预告片 守护少年反对校园欺凌</p>
                   </li>
                 </ul>
              </div>
              <div class="list-view">
                <h2 class="list-view-title">相关资讯</h2>
                  <ul class="list-view ">
                    <li class="list-view-item">
                      <div class="listitem">
                        <div class="link-2">
                          <p class="title-2">社会各界力荐电影《少年的你》 ，权威媒体首肯影片勇气和担当</p>
                          <div class="preview-container">
                            <img class="img preview-item" src="//p0.meituan.net/movie/a227835082c501aff50370256fe605c5445122.jpg@300w_225h_1e_1c.webp">
                            <img class="img preview-item" src="//p0.meituan.net/movie/8e60ce8d89e32494d4eb9916eda65e612480262.jpg@300w_225h_1e_1c.webp">
                            <img class="img preview-item" src="//p0.meituan.net/movie/f92ea068960b7e6255baeecac7968873362385.jpg@300w_225h_1e_1c.webp">
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                  <ul class="list-view ">
                    <li class="list-view-item">
                      <div class="listitem">
                        <div class="link-2">
                          <p class="title-2">《少年的你》发布“纪录片” ，少年的向往和相信珍贵如初</p>
                          <div class="preview-container">
                           <img class="img preview-item" src="//p0.meituan.net/movie/99c5d96d596e6533622a0fe00dfac1d23154684.jpg@300w_225h_1e_1c.webp">
                          <img class="img preview-item" src="//p0.meituan.net/movie/fbd7f8feb4eb3eb269d7b1c930f048b03369723.jpg@300w_225h_1e_1c.webp">
                          <img class="img preview-item" src="//p0.meituan.net/movie/e0850d9bc2a1529a6b1c17656e1316d83441780.jpg@300w_225h_1e_1c.webp">
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
              </div>
          </div>

       <div class="preview-movie-fixed" v-show="scrTop">
        <div class="link">
            <img class="icon-img" src="../../../public/images/mao.png"/>
            <span>打开app,提升3倍流畅度</span>
        </div>
        <div class="preview-buy-box-wrapper">
              <div class="movie-name">{{lisPrt.nm}}</div>
              <div class="data-reactid">
                特惠购票
              </div>
              <span class="preview-movie-intro-score">
                猫眼评分
                <span>{{lisPrt.sc}}</span>
              </span>
        </div>
     </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    lisPrt: {},
    scrTop: false
  }),
  created () {
    this.getNam()
    // this.getSctop()
    window.addEventListener('scroll', this.getSctop)
    this.$store.state.bottomFlag = true
    this.$store.state.topFlag = false
  },
  destroyed () {
  },
  methods: {
    async getNam () {
      const lis = await this.$http({
        url: 'ajax/detailmovie?movieId=' + this.$route.params.id
      })
      this.lisPrt = lis.data.detailMovie
    },
    async getSctop () {
      const scrollTop = document.documentElement.scrollTop
      if (scrollTop >= 80) {
        this.scrTop = true
        // this.scrTop.style.position = 'fixed'
        // scrollTop.style.marginBottom = this.scrTop.offsetHeight + 'px'
      } else if (scrollTop < 80) {
        this.scrTop = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .Preview{
    height: 600px;
    .Preview-video{
        width: 375px;
        height: 210px;
        box-sizing: border-box;
        position: fixed;
        top: 0;
        z-index: 100;
        }
        .video{
          height:100%;
          width: 100%;
        }
        .ticket-purchase{
             height: 266px;
            width: 375px;
            margin-top: 227px;
            padding-bottom: 10px;
          .link{
            width: 345px;
            height: 44px;
            background: #F03D37;
            margin: 0 auto .3rem;
            border-radius: 20px;
            font-size: 15px;
            text-align: center;
            color: aliceblue;
            img{
              height: 20px;
              width: 20px;
              margin-top:10px;
            }
            span{
              margin-left: 10px
            }
          }
         .preview-comments {
              position: relative;
              padding-top: .24rem;
                 margin: 9px 0px 12px 8px;
                  box-shadow: 0 0 71.2px rgba(0, 0, 0, 0.2);
              width: 360px;
              height:40px;
              line-height: 40px;
              display: -webkit-box;
              display: flex;
              -webkit-box-pack: justify;
              -ms-flex-pack: justify;
              justify-content: space-between;
              .avatar-box {
              padding-right: .3rem;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
            .avatar {
              width: 20px;
              height: 20px;
              border-radius: 50%;
              position: absolute;
              top: 50%;
              margin-top: 25px;
              left: -15px;
              position: relative;
            }
         }

            .title-box {
              .title{
                    font-size: 15px;
                    color: #333;
                    font-weight: 700;
                    margin-left: 10px
              }
              .count {
                  font-size: 12px;
                  color: #999;
                  margin-left: 8px;
              }
            }
          }
          .preview-list{
            width: 375px;
            height: 175px;
                margin-bottom: 24px;
            .list-view-title{
                  position: relative;
                  line-height: 20px;
                  color: #333;
                  padding: 20px 20px;
                  background-color: #fff;
                  font-weight: bold;
                  margin: 0;
            }
            .preview-scroll{
                  overflow-x: scroll;
                  white-space: nowrap;
                  padding: 0 .3rem .3rem .3rem;
                  margin: 0;
                  font-size: .26rem;
                  color: #333;
                  .video-item{
                        .img {
                          width: 140px;
                          height: 78px;
                          border-radius: 3px;
                        }
                  }

            }
             .preview-scroll>li {
                    display: inline-block;
                    margin-right: .15rem;
                    width: 140px;
                    overflow: hidden;
                    .title {
                      line-height: 25px;
                      margin: 0;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      overflow: hidden;
                      color: #333;
                    }
                }

          }
          .list-view{
            .list-view-title{
                  position: relative;
                  line-height: 20px;
                  color: #333;
                  padding: 0 20px;
                  background-color: #fff;
                  font-weight: bold;
                  margin: 0;
            }
            .list-view-item {
                position: relative;
                font-size: .34rem;
                line-height: 20px;
                margin-left: 10px;
                padding: .4rem .3rem .4rem 0;
                border-bottom: 0;
                .listitem {
                  margin-left: .3rem;
                  padding: .3rem .3rem .2rem 0;
                  font-size: 16px;
                  position: relative;
                  border-bottom: solid #e5e5e5 1px;
                  .title {
                      line-height: .39rem;
                      font-size: .32rem;
                      color: #333;
                      margin: 0;
                  }
                  .preview-container {
                      margin-top: 10px;
                      overflow: hidden;
                      .img{
                          display: inline-block;
                          width: 110px;
                          height:85px;
                          margin-left: 2%;
                      }
                  }
              }
              a {
                position: relative;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                -ms-flex-direction: row;
                flex-direction: row;
              }
            }
          }

           .preview-intro{
              display: flex;
              padding: .16rem;
              margin:15px;
              position: relative;
              background: #fff;
              border-radius: .08rem;
              box-shadow: 0 0 71.2px rgba(0, 0, 0, 0.2);
              img{
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                width: 80px;
                height: 110px;
                line-height: .88rem;
                font-size: .3rem;
                /* text-align: center; */
                color: #FFFFFF;
                background: #F03D37;
                box-shadow: 0 0.02rem 0.04rem rgba(251,51,51,0.3);
                border-radius: .4rem;
              }
              .movie-intro-desc{
                margin-left: 14px;
                display: flex;
                width: 114px;
                height: 110px;
                flex-direction: column;
                text-overflow: ellipsis;
                overflow: hidden;
                    white-space: nowrap;
                .text-ellipsis {
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
                div:nth-child(1){
                  font-size: 17px;
                  font-weight: bold;
                }
                span:nth-child(2){
                  font-size: .24rem;
                    color: #999;
                }
                span:nth-child(3){
                  margin-top: 10px;
                  color: #666;
                }
                span:nth-child(4){
                  font-size: .24rem;
                    color: #999;
                    margin: 4px 0 4px 0
                }
                span:nth-child(5){
                  font-size: .24rem;
                    color: #999;
                }
              }
             .preview-buy-box{
                margin:auto;
                display: flex;
                flex-direction: column;
                .preview-buy-span{
                    width: 76px;
                    height: 28px;
                    background: #F03D37;
                    border-radius:25px;
                    text-align: center;
                    line-height: 28px;
                    color: #fff;
                }
                .preview-buy-div{
                      font-size: .24rem;
                      color: #666;
                      margin-top:10px;
                      span{
                            margin: 0 0 0 8px;
                            color: #FAAF00;
                            font-size: .32rem;
                            vertical-align: baseline;
                          }
                      }
                }
          }
        }

    .preview-movie-fixed{
          height: 166px;
          width: 375px;
          margin-top: -293px;
          padding-top: 21px;
          padding-bottom: 10px;
          background: rgba(255, 255, 255, 0.9);
          position: fixed;
          z-index: 10000;
          .link{
            width: 345px;
            height: 44px;
            display: flex;
           align-items: center;
           justify-content: center;
            background: #F03D37;
            margin: 0 auto .3rem;
            border-radius: 20px;
            font-size: 15px;
            text-align: center;
            color: aliceblue;
            }
            .icon-img{
                  width: 20px;
                height: 20px;
                margin-right: 10px;
            }
          .preview-buy-box-wrapper{
            width: 345px;
            height: 76px;
            box-shadow: 0 0 71.2px rgba(0, 0, 0, 0.2);
            margin:20px auto;
            position: relative;
                background: #fff;
            .movie-name{
                font-size:19px;
                color: #333;
                line-height: 40px;
                margin-left: 10px;
            }
            .data-reactid{
              float:right;
              width:76px;
              height: 29px;
              background: #F03D37;
              border-radius:20px ;
              text-align: center;
              line-height: 29px;
              margin-top:10px;
              margin-right: 10px;
              position:absolute;
              top: 10px;
              right: 10px;
            }
            .preview-movie-intro-score{
                      font-size: .24rem;
                      color: #666;
                      margin-top:10px;
                      margin-left: 10px;
                      span{
                            margin: 0 0 0 8px;
                            color: #FAAF00;
                            font-size: .32rem;
                            vertical-align: baseline;
                          }
                      }
          }
        }
  }
</style>
